<!-- 入学/毕业信息 -->
<template>
	<div>
		<div class="table-container table-css">
			<el-table :data="tableData" border style="width: 100%" class="table-data" :header-cell-style="{background:'#edf2f9','border-color': '#c7d7eb'}">
				<el-table-column prop="mname" label="姓名" align="center">
					<template slot-scope="scope">
						<el-input v-model="scope.row.mname"></el-input>
					</template>
				</el-table-column>
				<el-table-column prop="relation" label="和本人关系" align="center">
					<template slot-scope="scope">
						<el-select v-model="scope.row.relation" placeholder="请选择" class="inputWidth">
							<el-option v-for="item in parentGX" :key="item.dictValue" :label="item.dictValue" v-model="item.dictKey"></el-option>
						</el-select>
					</template>
				</el-table-column>
				<el-table-column prop="idCard" label="身份证号" width="300px" align="center">
					<template slot-scope="scope">
						<el-input v-model="scope.row.idCard"></el-input>
					</template>
				</el-table-column>
				<el-table-column prop="workunit" label="工作单位" width="400px" align="center">
					<template slot-scope="scope">
						<el-input v-model="scope.row.workunit"></el-input>
					</template>
				</el-table-column>
				<el-table-column prop="post" label="职务" align="center">
					<template slot-scope="scope">
						<el-input v-model="scope.row.post"></el-input>
					</template>
				</el-table-column>
				<el-table-column prop="phone" label="联系电话" align="center">
					<template slot-scope="scope">
						<el-input v-model="scope.row.phone"></el-input>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="button-group">
			<div class="" @click="save">保存</div>
            <div class="" @click="cancel">取消</div>
		</div>
		<el-dialog title="提示" :visible.sync="noticeDialog" width="983px" :closeOnClickModal="false">
			<div class="message-container">
				<p class="dialogNotice">您当前页面还有未保存信息,请先保存!</p>
				<span slot="footer" class="dialog-footer">
					<button @click="continueJump">继续跳转</button>
					<button @click="noticeDialog = false">返回保存</button>
				</span>
			</div>
		</el-dialog>
	</div>
</template>

<script>

import {addStudentFamily} from "@/api/student";
  export default {
		data(){
		  return {
            tableData:[],
			noticeDialog:false,
			parentGX:[],
          }
		},
		props: {
			dataForm: {
				type: Array,
				default:()=>[]
			},
		},
		watch:{
			dataForm(val){
				let data = [];
				let code = this.$route.query.studentCode
				for(let i = 0;i<20;i++){
					data.push({
						idCard:'',
						mname:'',
						phone:'',
						post:''	,
						relation:'',
						studentCode:code,
						workunit:'',
						id:''
					})
				}
				this.tableData = [...val,...data]
			}
		},
        methods: {
            cancel(){
				this.noticeDialog = true;
			},
			continueJump(){
				this.noticeDialog = false;
				this.$emit('continueJump')
			},
			async save(){
				let indexArry = [];
				let params = []
				this.tableData.forEach((item,index)=>{
					if(item.mname){
						if(item.idCard && item.phone && item.post && item.relation && item.relation && item.workunit){
							params.push(item)
						}else{
							indexArry.push(index+1)
						}
					}
				})
				if(indexArry.length>0){
					let msg = '第'+indexArry.join(',')+'行信息不能为空！'
					this.$confirm(msg, {
						confirmButtonText: '确定',
						cancelButtonText: '',
						type: 'warning'
					})
					return
				}
				// let data = {
				// 	studentCode:this.$route.query.studentCode,
				// 	xyFamilyInfo:params
				// }
				let res = await addStudentFamily(params);
				if(res.code == 200){
					this.$message.success({message: '添加成功',type: 'success'});
					this.$router.push({
						path:'/student/studentStatus/infoSearch',
						query:{
							studentCode:this.$route.query.studentCode
						}
					})
				}else{
					this.$message.error(res.msg);
				}
			}
        },
		mounted(){
			this.commonApi.getCommonData({code:'relationCode'}).then(res=>{
                this.parentGX = res.data
            })
		},
  };
</script>
<style lang="less" scoped>
	.table-css {
		margin-top: 30px;
		/deep/.el-table td,
		.el-table th.is-leaf,
		.el-table--border,
		.el-table--group {border-color: #c7d7eb;}
		.el-table__header tr,
		/deep/.el-table__header th {
			padding: 0;
			height: 76px;
			background-color: #edf2f9;
			font-size: 16px;
			font-family: Microsoft YaHei;
			font-weight: bold;
			line-height: 20px;
			color: #004ca7;
		}

		/deep/.el-table__body tr,
		.el-table__body td {
			padding: 0;
			height: 86px;
		}
	}
	
</style>
<style scoped lang="less">
@import "../../../../styles/commonCss.less";
	.dialogNotice{
		font-size: 18px;
		font-family: Microsoft YaHei;
		font-weight: bold;
		line-height: 20px;
		color: #004CA7;
		text-align: center;
		margin: 68px 0 92px 0;
	}
	.dialog-footer{
		display: flex;
		justify-content: center;
		margin-bottom: 100px;
		button{
			width: 114px;
			height: 36px;
			border-radius: 6px;
			&:nth-child(1) {
				background: #FFF6EF;
				border: 1px solid #F3B815;	
				color: #F3B815;
				margin-right: 96px;			
			}
			&:nth-child(2) {
				background: #F1FFF8;
				border: 1px solid #02C86C;
				color: #02C86C;
			}
		}
	}
    /deep/.my-form-item-label{justify-content: center;padding: 0!important;}
	.table-container {
		.table-data {
			width: 100%;
			border: 0.8px solid #004ca7;
			border-radius: 9px;
			font-size: 14px;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #004ca7;
		}
	}
	.inputWidth{width: 90%;}
</style>